<template>
  <baidu-map class="bm-view" :center="{ lng: 116.403401, lat: 39.924823 }" :zoom="1" :scroll-wheel-zoom="true"
    ak="gpGbr1nxuPekgGKg0eC8LQhoWpkNgc8e" v="1.0" type="webgl" @click="handelClick" mapType="BMAP_EARTH_MAP">
    <!-- 二维地图和卫星地图 -->
    <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP','BMAP_EARTH_MAP']"></bm-map-type> -->
    <!-- 城市列表-选择城市搜索城市(支持市级以上搜索) -->
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" @changeAfter=""></bm-city-list>
    <!-- 点标记 -->
    <bm-marker :position="state" :dragging="true" :raiseOnDrag="true">
      <bm-info-window :show="show" @close="show = false" @open="show = true">
        {{ address }}
      </bm-info-window>
    </bm-marker>
    <!-- 定位 -->
    <bm-geolocation anchor="BMAP_ANCHOR_TOP_RIGHT" :showAddressBar="true" :autoLocation="true" @locationSuccess="(e: any) =>
        message.success(
          '定位成功已切换到' +
          e.addressComponent.province +
          e.addressComponent.city,
        )" @locationError="message.error('定位失败')"></bm-geolocation>
  </baidu-map>
</template>



<script setup>
// 引入ant-design-vue组件库
import { message } from 'ant-design-vue'
// 引入vue-baidu-map-3x
import { reactive, ref } from 'vue'
import {
  BaiduMap,
  BmMapType,
  BmCityList,
  BmMarker,
  BmGeolocation,
  BmInfoWindow,
} from 'vue-baidu-map-3x'
 
const show = ref(false)
const address = ref(undefined)
const state = reactive({
  lng: 116.403401,
  lat: 39.924823,
})
 
const handelClick = (e) => {
  show.value = false
  state.lng = e.point.lng
  state.lat = e.point.lat
  const geocoder = new window.BMap.Geocoder()
  console.log('123');
 
  // 解析地址
  geocoder.getLocation(e.point, (res) => {
    if (res) {
      show.value = true
      address.value = res.address
    }
  })
}
</script>





<style scoped>
/* 去除水印 */
::v-deep(.BMap_cpyCtrl) {
  display: none;
}
 
::v-deep(.anchorBL) {
  display: none !important;
}
 
/* 布局css元素 */
.bm-view {
  width: 98vw;
  height: 95vh;
  margin: auto;
}
</style>